<template>
	<view class="logisticsDetail">
		<u-navbar
			titleStyle="font-size:40rpx;color:#333"
			:placeholder='true' 
			title="物流详情"
			:autoBack="true"
			>
		</u-navbar>
		<view class="padding32">
			<view class="flex">
				<!-- <image src="../../../static/logo.png" mode="" class="logisticdImag"></image> -->
				 <view style="margin: 0 16rpx;">
				 	{{order.delivery_name}} 
				 </view>
				 <!-- <image src="../../../static/images/mine/Frame.png" style="width: 36rpx; height: 36rpx;" ></image> -->
			</view>
			<view class="mt24 flexJBC fontS28" style="margin-top: 28rpx;">
				<view class="">
					快递单号：{{order.delivery_id}} 
				</view>
				<view class="" @click="$my.copy(order.delivery_id)">
					 复制
				</view>
			</view>
			<view class="mt24 flexJBC fontS28" style="margin-top: 20rpx;">
				<view class="">
					订单编号：{{order.sn?order.sn:order.refund_sn}} 
				</view>
				<view class="" @click="$my.copy(order.sn?order.sn:order.refund_sn)">
					 复制
				</view>
			</view>
			<view class="mt32 whiteBox">
				<u-steps :current="current" dot direction="column" activeColor='#DD2131' inactiveColor='#DD2131'>
					<!-- <u-steps-item title="已签收 09-05 16:50" desc="已签收" :key="index" v-for="(item,index) in step" v-if="index==0">
						<image v-if="index==0" src="../../../static/images/mine/Group 33220.png" mode="" slot="icon" style="width: 48rpx;height: 48rpx;"></image>
					</u-steps-item> --> 
					<u-steps-item  title="" :desc="item.time+item.context" :key="index" v-for="(item,index) in express">
						<text class="slot-icon" slot="icon" v-if="index>1"></text>
						<image v-if="index==0" src="../../../static/images/mine/Group 33220.png" mode="widthFix" slot="icon" style="height: 48rpx;"></image>
					</u-steps-item> 
					<!-- <u-steps-item title="送至 500号xxxx小区" desc="董董 86-19281921221"> 
						<text class="slot-icon" slot="icon"></text>
					</u-steps-item> -->
				</u-steps>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				current:1, 
				step:10,
				order:'',
				express:[],
			}
		},
		onLoad(option) {
			this.order=JSON.parse(option.order)
			this.express=JSON.parse(option.express)
			console.log(this.order,this.express)
		}
	}
</script>

<style lang="scss" scoped>
	// /deep/ .u-steps-item__line{
	// 	color: $red !important;
	// }
	/deep/ .u-text__value--main{
		color: $red;
	}
	/deep/ .u-text__value--content {
		font-size: 28rpx !important;
		color:#999;
		// color: $red;
		// font-weight: 700 !important;
	} 
	// /deep/ .u-text__value--tips {
	// 	font-size: 20rpx !important;
	// 	color: #666 !important;
	// }
	.logisticdImag{
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}
	.slot-icon {
		width:16rpx;
		height: 16rpx;
		border-radius: 50%;
		border: 2rpx solid $red;
	} 
</style>